import * as React from 'react';
import Select from '@material-ui/core/Select';
import { MenuItem } from '@material-ui/core';

export const SelectionField = (props) => {
  const {
    data, className, id, enabled, uischema, path, handleChange,
  } = props;
  const labels = uischema.options && uischema.options.labels;
  return (
    <Select
      className={className}
      id={id}
      disabled={!enabled}
      autoFocus={uischema.options && uischema.options.focus}
      value={data || ''}
      onChange={ev => handleChange(path, ev.target.value)}
      fullWidth
    >
      {
        [<MenuItem value="" key="empty" />]
          .concat(
            (Object.keys(labels) || []).map(optionValue => (
              <MenuItem value={optionValue} key={optionValue}>
                {labels ? labels[optionValue] : optionValue}
              </MenuItem>
            )),
          )}
    </Select>
  );
};
